<template>
  <div
    class="glass-card"
    :style="{
      '--card-bg': bg,
      '--card-border': borderColor,
      '--card-radius': radius,
      '--card-padding': padding,
      '--card-blur': blur
    }">
    <slot />
  </div>
</template>

<script setup lang="ts">
import { withDefaults } from "vue"

type Props = {
  bg?: string
  borderColor?: string
  radius?: string
  padding?: string
  blur?: string
}

withDefaults(defineProps<Props>(), {
  bg: "rgba(234, 244, 254, 0.75)",
  borderColor: "#e3edf5",
  radius: "12px",
  padding: "12px",
  blur: "6px"
})
</script>

<style scoped>
.glass-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  backdrop-filter: blur(var(--card-blur));
  -webkit-backdrop-filter: blur(var(--card-blur));
}

/* Inner defaults for Element Plus form controls */
.glass-card :deep(.el-form-item) {
  margin-bottom: 10px;
}
.glass-card :deep(.el-form-item__label) {
  color: #4b5b76;
  font-weight: 600;
}
.glass-card :deep(.el-input__wrapper) {
  background: #ffffff !important;
  box-shadow: none !important;
  border: 1px solid #e3edf5 !important;
  border-radius: 8px !important;
}
.glass-card :deep(.el-input-number__decrease),
.glass-card :deep(.el-input-number__increase) {
  color: #5a6b86;
}
</style>
